// 时间选择的每一列
<template>
  <div class="picker-column">
    <ul
      class="picker-column_wraper"
      :style="{
        transform: 'translate3d(0px,' + -distance + 'px' + ',0px)',
        'transition-duration': duration,
      }"
      v-touchmove="moveTime"
    >
      <li class="picker-column_item" v-for="date in dateList" :key="date">
        {{ date }}
      </li>
    </ul>
  </div>
</template>

<script>
import directives from "../directives";
export default {
  name: "column",
  props: {
    dateList: {
      type: Array,
      require: true,
    },
    currentDate: {
      type: Number,
      default: 1,
    },
    type: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      distance: 0,
      duration: "0ms",
    };
  },
  directives,
  watch: {
    dateList: {
      handler(newVal) {
        this.duration = "200ms";

        const index = this.dateList.findIndex((item) => {
          return item === this.currentDate;
        });
        if (index >= 0) {
          this.distance = (index - 2) * 44;
        }

        let maxDistance = (newVal.length - 3) * 44;
        if (this.distance > maxDistance) {
          this.distance = maxDistance;
        }

        this.$nextTick(() => {
          this.duration = "0ms";
        });
      },
      deep: true,
      immediate: true,
    },
    distance() {
      this.$nextTick(() => {
        this.changeDate();
        this.duration = "0ms";
      });
    },
  },
  methods: {
    moveTime(y, isTouchend) {
      if (isTouchend) {
        this.moveTiemEnd();
        return;
      }
      this.distance = y + this.distance;
    },
    moveTiemEnd() {
      this.duration = "200ms";
      // 判断是否超出最大最小位置

      if (this.distance < -88) {
        this.distance = -88;
      }
      let maxDistance = (this.dateList.length - 3) * 44;
      if (this.distance > maxDistance) {
        this.distance = maxDistance;
      }

      // 根据数值修正最终的移动距离

      if (!(this.distance % 44 === 0)) {
        let cellDistance = this.distance % 44;

        if (cellDistance >= 22) {
          this.distance = this.distance + 44 - cellDistance;
        } else if (cellDistance >= 0) {
          this.distance = this.distance - cellDistance;
        } else if (cellDistance <= -22) {
          this.distance = this.distance - (44 + cellDistance);
        } else {
          this.distance = this.distance + Math.abs(cellDistance);
        }
      }
    },
    changeDate() {
      const index = this.distance / 44;
      this.$emit("changeDate", this.dateList[index + 2], this.type);
    },
  },
};
</script>

<style lang="scss" scoped>
.picker-column {
  flex: 1;
  overflow-y: hidden;
  .picker-column_wraper {
    height: 100%;
    margin: 0;
    padding: 0;
    transition-property: all;
  }
  .picker-column_item {
    height: 44px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 16px;
  }
}
</style>